<template>
  <div class="left">
    <el-row :gutter="20">
      <el-col :span="6">
        <FileList :filedata="filedata" @viewfile="viewfile"></FileList>
      </el-col>
      <el-col :span="14">
        <el-card class="right">
          <MdPreview :editorId="state.id" :modelValue="state.text"></MdPreview>
        </el-card>
      </el-col>
      <el-col :span="4" class="nav">
        <el-card>
          <MdCatalog :editorId="state.id" :scrollElement="scrollElement" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
import '@vavt/v3-extension/lib/asset/ExportPDF.css';
import { MdPreview, MdCatalog } from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';
import axios from "axios"
import { MdFile } from '@/model/dataModel';
import { getFileData } from "@/api/fileApi"


const state = reactive({
  theme: 'dark',
  text: '请选择左边文档',
  id: 'my-editor',
  catalogList: []
});

//点击某个markdown文件名，显示文件内容
let scrollElement = ref<any>()

//组件加载时，加载文件列表
let filedata = reactive<Array<MdFile>>([])
onMounted(() => {
  getFileData(filedata)
})


//当列表单击时，会调用该方法
const viewfile = async(md: MdFile) => {
  await axios.get(md.path).then(response => {
    state.text = response.data;
    scrollElement.value = document.documentElement;
  }).catch(error => {
    console.log("加载md文件失败", error)
  })
 
}

//导航单击事件
// const navClick = (e: MouseEvent, t: any) => {
//   scrollElement.value = t.text;
//   console.log(t)
//   scrollTo(t.text)
//   // t.active = true;
// }

//滚动导航
// const scrollTo = (ident: string) => {
//   let el = document.getElementById(ident);
//   if (el) {
//     window.scrollTo({
//       //滚动到元素位置
//       //top: this.$refs[元素].offsetTop,//offsetTop 相对于offsetparent 定位,当有定位时，不准确。
//       top: el.getBoundingClientRect().top + window.scrollY,//推荐使用，getBoundingClientRect 相对于当前视口的位置
//       //top: 400//滚动到指定距离
//       //top: 0,//滚动到顶部
//       //top: document.documentElement.scrollHeight,//滚动到底部
//       behavior: "smooth" // 平滑滚动
//     });
//   }
// }

</script>
<style scoped lang="scss">
.nav {
  position: fixed;
  top: 100;
  right: 0;
  z-index: 9999;
}

.md-editor-previewOnly{
  height: 1000px !important;
  min-height: 100px;
}
</style>